@import "../vars";

$avatar-size-base: 32px !default;
$avatar-size-lg: 40px !default;
$avatar-size-sm: 24px !default;

$avatar-size-xl: 60px !default;
$avatar-size-xxl: 100px !default;

$avatar-font-size-base: 18px !default;
$avatar-font-size-lg: 24px !default;
$avatar-font-size-sm: 14px !default;

$avatar-font-size-xl: 28px !default;
$avatar-font-size-xxl: 30px !default;

$avatar-bg: $--color-text-placeholder !default;
$avatar-color: $--color-white !default;
$avatar-border-radius: $--border-radius-base !default;

@mixin avatar-size($size, $font-size) {
  width: $size;
  height: $size;
  line-height: $size;
  border-radius: $size / 2;
  & > * {
    line-height: $size;
  }

  &.xdh-avatar-icon {
    font-size: $font-size;
  }
}

.xdh-avatar {
  display: inline-block;
  text-align: center;
  background: $avatar-bg;
  color: $avatar-color;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  vertical-align: middle;

  @include avatar-size($avatar-size-base, $avatar-font-size-base);

  @at-root {

    &-xl {
      @include avatar-size($avatar-size-xl, $avatar-font-size-xl);
    }

    &-xxl {
      @include avatar-size($avatar-size-xxl, $avatar-font-size-xxl);
    }

    &-large {
      @include avatar-size($avatar-size-lg, $avatar-font-size-lg);
    }

    &-small {
      @include avatar-size($avatar-size-sm, $avatar-font-size-sm);
    }

    &-square {
      border-radius: $avatar-border-radius;
    }
  }

  & > img {
    width: 100%;
    height: 100%;
  }

}
